import styles from './Overview.module.scss'
import { defineComponent, ref } from 'vue'
import { useExpose } from '@renderer/utils'

export default defineComponent({
  name: 'Overview',
  setup(props, { emit, slots }) {
    const state = ref<any>([
      [
        { name: '计划添加好友数', v: 0, color: '' },
        { name: '已添加好友数', v: 0, color: 'green' },
        { name: '未添加好友数', v: 0, color: 'red' },
        { name: '进行中任务', v: 0, color: 'blue' },
        { name: '已暂停任务', v: 0, color: '' },
        { name: '已结束任务', v: 0, color: '' }
      ]
    ])
    const onState = (type: any, res?: any) => {
      switch (type) {
        case 0:
          state.value = [
            { name: '计划添加好友数', v: res.FriendPlanned, color: '' },
            { name: '已添加好友数', v: res.FriendSuccessed, color: 'green' },
            { name: '未添加好友数', v: res.FriendWaited, color: 'red' },
            { name: '进行中任务', v: res.TaskRunning, color: 'blue' },
            { name: '已暂停任务', v: res.TaskPaused, color: '' },
            { name: '已结束任务', v: res.TaskFinished, color: '' }
          ]
          break
        case 1:
          state.value = [
            { name: '计划群数', v: res.GroupchatPlanned, color: '' },
            { name: '已完成群数', v: res.GroupchatSuccessed, color: 'green' },
            { name: '计划添加群好友人数', v: res.FriendPlanned, color: '' },
            { name: '已发群好友邀请数', v: res.FriendInvited, color: '' },
            { name: '已添加好友数', v: res.FriendSuccessed, color: 'green' },
            { name: '未添加好友数', v: res.FriendNotAdded, color: 'red' },
            { name: '进行中任务', v: res.TaskRunning, color: 'blue' },
            { name: '已暂停任务', v: res.TaskPaused, color: 'blue' },
            { name: '已结束任务', v: res.TaskFinished, color: '' }
          ]
          break
        case 2:
          state.value = [
            { name: '预计群发客户数', v: res.NumPlanned, color: '' },
            { name: '已群发客户数', v: res.NumSuccessed, color: 'green' },
            { name: '发送失败客户数', v: res.NumAborted, color: 'red' },
            { name: '进行中任务', v: res.TaskRunning, color: 'blue' },
            { name: '未开始任务', v: res.TaskUnStarted, color: '' },
            { name: '已暂停任务', v: res.TaskPaused, color: '' },
            { name: '已结束任务', v: res.TaskFinished, color: '' }
          ]
          break
        case 3:
          state.value = [
            { name: '群公告发布总数', v: res.Planned, color: '' },
            { name: '群公告成功发布数', v: res.Successed, color: 'green' },
            // { name: '群公告发布失败数', v: res.Filed, color: 'red' },
            { name: '进行中任务', v: res.TaskRunning, color: 'blue' },
            { name: '未开始任务', v: res.TaskUnRunning, color: '' },
            { name: '已暂停任务', v: res.TaskPaused, color: '' },
            { name: '已结束任务', v: res.TaskFinished, color: '' }
          ]
          break
        case 4:
          state.value = [
            { name: '累计事件总数', v: res.messData, color: '' },
            { name: '成功处理数量', v: res.messSuccessData, color: 'green' },
            { name: '群发处理数量', v: res.massDispatchData, color: 'green' },
            { name: '私信处理数量', v: res.privateLetterData, color: 'green' },
            { name: '处理失败数量', v: res.messFailData, color: 'red' },
          ]
          break
      }
    }
    useExpose({
      onState
    })
    const renderDom = (list: any) => <></>
    return () => (
      <div class={styles.overview}>
        <div class={styles.title}>数据概览</div>
        <div class={styles.data}>
          {state.value.map((item: any) => (
            <div class={styles.item}>
              <div class={styles.item_name}>{item.name}</div>
              <div class={styles.item_num} style={{ color: item.color }}>
                {item.v}
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }
})
